<template>
	<view v-if="chapterTitle" class="bottom-bar" :style="{'background': readTheme.defaultBackground}">
		<text class="u-line-1">{{chapterTitle}}</text>
		<text>{{ chapterPercentage }}</text>
	</view>
</template>

<script>
	import {
		getChapterDetail
	} from "@/api/chapter";
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				chapterCount: 0
			}
		},
		props: {
			chapterTitle: {
				type: String
			},
			chapterIndex: {
				type: [Number, String]
			},
			bookId: {
				type: [Number, String]
			}
		},
		computed: {
			...mapState({
				currentReadBookInfo: state => state.read.currentReadBookInfo
			}),
			...mapGetters({
				readTheme: 'readTheme'
			}),
			chapterPercentage() {
				if (!this.currentReadBookInfo.chapter_count || !this.chapterIndex) return
				return (this.chapterIndex / this.currentReadBookInfo.chapter_count * 100).toFixed(2) + '%'
			}
		}
	}
</script>

<style scoped>
	.bottom-bar {
		position: fixed;
		width: 100vw;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 20upx 40upx;
		color: #606266;
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
	}
</style>
